<template>
    <div id="filter">
        <div v-for="item in filter" :class="{time:item.time}">
            <span>{{item.label}}：</span>
            <div :style="{width:item.width}">
                <el-select v-if="item.options" v-model="item.value" :clearable="true">
                    <el-option
                            v-for="option in item.options"
                            :key="option.value"

                            :label="$t('option.'+option.label).indexOf('.')>-1?option.label:$t('option.'+option.label)"
                            :value="option.value">
                    </el-option>
                </el-select>
                <el-date-picker
                        v-else-if="item.time"
                        v-model="item.value"
                        :type="item.type || 'datetimerange'"
                        range-separator="-"

                        :default-time="item.default || ['00:00:00', '23:59:59']"
                        align="right">
                </el-date-picker>
                <el-input v-else v-model="item.value"></el-input>
            </div>
        </div>

        <el-button class="action" @click="search">{{$t('common.search')}}</el-button>
        <el-button class="action" v-if="addShow" @click="add">{{$t('common.add')}}</el-button>
        <el-button class="action" v-if="delShow" @click="del">{{$t('common.del')}}</el-button>
        <el-button class="action" v-if="action && action.type !== 'dropDown'" v-for="action in actions"
                   @click="actionFn(action)">{{action.label}}
        </el-button>
        <el-dropdown class="action" v-if="action && action.type === 'dropDown'" v-for="action in actions"
                     trigger="click"
                     placement="bottom" @command="actionFn">
            <el-button>
                {{action.label}}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in action.dropItem" :command={type:item.value,value:action.value}>
                    {{item.label}}
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-button class="action" v-if="editStatusShow" @click="editStatus">{{$t('common.editStatus')}}</el-button>
    </div>
</template>

<script>
  export default {
    name: "commonTableFilter",
    props: {
      filter: {
        type: Object,
        default() {
          return {}
        }
      },
      editStatusShow: {
        type: Boolean,
        default: false
      },
      delShow: {
        type: Boolean,
        default: true
      },
      addShow: {
        type: Boolean,
        default: true
      },
      actions: {
        type: Array,
        default() {
          return []
        }
      }
    },
    methods: {
      search() {
        let filter = {}
        Object.keys(this.filter).forEach(key => {
          if (this.filter[key].value) {
            if (key === 'time') {
              filter.startTime = this.filter[key].value[0].format('yyyy-MM-dd hh:mm:ss:S')
              filter.endTime = this.filter[key].value[1].format('yyyy-MM-dd hh:mm:ss:S')
            } else {
              filter[key] = this.filter[key].value
            }
          } else if (this.filter[key].value === 0) {
            filter[key] = -1
          }
        })
        this.$emit('search', filter)
      },
      editStatus() {
        this.$emit('editStatus', true)
      },
      add() {
        this.$emit('add', true)
      },
      del() {
        this.$emit('del', true)
      },
      actionFn(key) {
        let filter = {}
        Object.keys(this.filter).forEach(key => {

          if (this.filter[key].value) {
            if (key === 'time') {
              filter.startTime = this.filter[key].value[0].format('yyyy-MM-dd hh:mm:ss:S')
              filter.endTime = this.filter[key].value[1].format('yyyy-MM-dd hh:mm:ss:S')
            } else {
              filter[key] = this.filter[key].value
            }
          } else if (this.filter[key].value === 0) {
            filter[key] = -1
          }
        })

        this.$emit('action', key, filter)
      }
    }
  }
</script>

<style lang="less" scoped>
    #filter {
        padding-bottom: 10px;
        padding-left: 20px;
        > div {
            display: inline-block;
            margin-right: 20px;
            padding-top: 10px;
            > div {
                display: inline-block;
                width: 130px;
            }
        }
        .action {
            margin-right: 20px;
            margin-left: 0;
        }
        .time {
            width: 400px;
            > div {
                width: 330px;
                > div {
                    width: 330px;
                }
            }
        }
    }

</style>